import { useParams, useNavigate } from "react-router-dom"
import { connect } from "react-redux"
let arr = [
    { "id": 1, "name": "苹果", "price": 10 },
    { "id": 2, "name": "橘子", "price": 20 },
    { "id": 3, "name": "香蕉", "price": 30 },
    { "id": 4, "name": "西瓜", "price": 40 },
]
function Info(props) {
    const p = useParams()
    const tiao = useNavigate()
    return (
        <div>
            <h1>商品是：{arr[p.id - 1].id}--{arr[p.id - 1].name}--{arr[p.id - 1].price}</h1>
            <button onClick={() => { 
                props.add(arr[p.id - 1])
                tiao("/car")
             }}>加入购物车</button>
        </div>
    )

}
const mapDispatchToProps = (dispatch) => {
    return {
        "add": (m) => dispatch({ "type": "jia", "obj": m })
    }
}
export default connect(null, mapDispatchToProps)(Info)